<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="../../js/Vue.js-v2.6.10.js"></script>
	</head>
	<body>
		
		<div id="vue-app">
			<h4 v-text="modelTitle"></h4>
			<div id="userName"></div>
		</div>
		
		<script type="text/javascript">
			"use strict"
			var mixin = {};
			/* Vue.extend */
			var extendAPI = function(){
				/* 使用基础Vue构造器，创建一个“子类”。
				参数是一个包含组件选项的对象。
				注意：data 选项是特例，需要注意-在 Vue.extend() 中它必须是函数 */
				mixin = {
					data: function(){
						return {
							modelTitle: "extend示例",
						}
					},
					/* data: { // data 为非函数时，可以用于混入实例，但不可混入extend创建的Vue构造器中
						modelTitle: "extend示例",
					}, */
				}
				var Profile = Vue.extend({
					// el: "#userName", // 报错 option "el" can only be used during instance creation with the `new` keyword.(选项“el”只能在使用“new”关键字创建实例时使用。)
					mixins:[mixin],
					template: '<div>{{firstName}} {{lastName}} {{alias}}</div>',
					data: function(){
						return {
							firstName: "Walter",
							lastName: "White",
							alias: "Heisenberg"
						}
					}
				})
				//
				new Profile().$mount("#userName");
				// return; // 不在执行后续代码
			}
			extendAPI();
			
			
			var vm = new Vue({
				el: "#vue-app",
				mixins:[mixin],
				data: {
					
				}
			})
		</script>
	</body>
</html>